<template>
	<view class="key-container" @click="hide" v-show="showMask">
		<uni-transition :modeClass="['slide-bottom']" :show="show"
		:styles="{height:'100vh'}"
		 :duration="duration">
			<view class="key-content" @click.stop style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
				<slot>
					<view class="pb20" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;background-color: #FFFFFF;padding-top: 40rpx;text-align: center;">
						 <view class=" mr20 ml20 center pos-rel" >
						 	<view class="fs17 c-333">
						 		拜师
						 	</view>
							<view @click.stop="saoma"  class="fs13 pos-abs" style="color: #FF3556;bottom: 0;right: 0;">
								扫码
							</view>
						 </view>
						 <view class="mt20 dis-flex flex-center c-333">
						 	<input v-model="value" placeholder-style="color:#999;font-size:34rpx" type="text" style="background-color: #F2F3F7;width: 686rpx;height: 80rpx;border-radius: 200rpx;" value="" placeholder="请输入师傅邀请码" />
						 </view>
						 <view class="mt30 dis-flex flex-center" >
						 	<view  @click.stop="confirm" :class="{'bg-f5f c-999':value==''}" class="center c-fff" style="border-radius: 200rpx;width: 150rpx; height: 68rpx; line-height: 68rpx;background-color: #FF3556;">
						 		确认
						 	</view>
						 </view>
					</view>
				</slot>
				<view class="key-box block flex">
					<view class="key-left">
						<view class="key-top flex flex-wrap">
							<view class="btn-box" v-for="(item,index) in numArr" :key="index">
								<button hover-class="active"  class="cu-btn key-btn text-black text-xl" @click.stop="keydown(item)">{{item}}</button>
							</view>
						</view>
						<view class="key-bottom">
							<view class="btn-zero">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl"  @click.stop="keydown('0')">0</button>
							</view>
							<view class="btn-point">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('.')">.</button>
							</view>
						</view>
					</view>
					<view class="key-right">
						<view class="del">
							<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del">
								<text class="zm iconbackspace text-xl"></text>
							</button>
						</view>
						<view class="confirm">
							<button hover-class="active" :style="confirmStyle" class="cu-btn" @click.stop="confirm">
								<text class="confirm-text">{{confirmText}}</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
/**
 * 付款组件
 * @property {Number} duration - 弹出动画时长，默认为300
 * @event {Function} change - 数字改变触发，参数为数字
 * @event {Function} confirm - 付款时触发，参数为数字
 * @event {Function} hide - 关闭键盘触发，参数为空
 */
// 使用方法,查看同级目录exmple
import uniTransition from '../uni-transition/uni-transition.vue'
export default{
	components:{
		uniTransition
	},
	props:{
		duration:{
			type:Number,//弹出动画时常
			default:300
		},
		confirmText:{
			type:String,
			default:'付款'
		},
		confirmStyle:{
			type:Object,
			default:()=>{
				return{
					backgroundColor:'#57BE6D'
				} 
			}
		}
		
	},
	data(){
		return{
			value:'',//输出的值
			show:false,//显示键盘
			showMask:false,//遮罩层
			numArr:[1,2,3,4,5,6,7,8,9]
		}
	},
	
	watch:{
		value(newval,oldval){
			this.$emit("change",newval);
		}
	},
	methods:{
		close(){
			this.show = false;
			setTimeout(()=>{
				this.showMask = false;
			},this.duration)
		},
		open(){
			this.value = '';
			this.show = true;
			this.showMask = true;
		},
		del(){
			if(this.value.length){
				this.value = this.value.slice(0,this.value.length-1);
			}
		},
		keydown(e){
			switch(e){
				case '.':
				// 当输入为点的时候，如果第一次输入点，则补零
				if(!this.value.length){
					this.value = '0.';
				}else{
					if(this.value.indexOf('.')>-1){
						// 如果已经有点，则无效
					}else{
						this.value = this.value+''+e;
					}
				}
				break;
				case '0':
				if(this.value.length === 0){
					this.value = this.value+''+e;
				}
				if(Number(this.value) === 0 && this.value.indexOf('.')== -1){
					// 当输入为零的时候，如果value转换成数字为零，且没有点则无效
				}else{
					this.value = this.value+''+e;
				}
				break;
				default:
				this.value = this.value+''+e;
				break;
			}
		},
		hide(){
			// this.$emit('hide');
			this.close();
		},
		confirm(){
			this.$emit('confirm',this.value);
			// this.close();
		},
		saoma(){
			this.$emit('saoma',this.value);
			// this.close();
		}
	}
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'zm';  /* project id 2442084 */
  src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
  src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
  url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
}

.zm {
  font-family: "zm" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconbackspace:before {
  content: "\ef11";
}

.flex{
	display: flex;
}
.flex-wrap{
	flex-wrap: wrap;
}
.cu-btn {
	position: relative;
	border: 0rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	font-size: 28rpx;
	height: 64rpx;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0rpx, 0rpx);
	margin-right: initial;
}

.cu-btn::after {
	display: none;
}
.text-xl{
	font-size:36rpx;
	font-weight: bold;
	font-family: 'microsoft-yahei';
}
.text-black{
	color:#333;
}
.active{
	background-color: #ddd !important;
	transform: translate(2rpx,2rpx);
}
.key-container{
	position: fixed;
	bottom: 0;
	top:0;
	left:0;
	right:0;
	background-color: rgba(0,0,0,.3);
	.key-content{
		position: absolute;
		bottom: 0;
		width: 100vw;
		background-color: #F7F7F7;
	}
}
.key-box{
	width: 100%;
	box-sizing: border-box;
	padding:10rpx 10rpx 0;
	.key-left{
		width: 75%;
	}
	.key-right{
		width: 25%;
		display: flex;
		flex-direction: column;
	}
	.key-bottom{
		width: 100%;
		display: flex;
	}
}
.del{
	width: 100%;
}
.btn-box{
	width: 33.33%;
	padding:0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.btn-zero{
	width: 66.66%;
	padding:0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.btn-point{
	width: 33.33%;
	padding:0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.key-right{
	flex-shrink: 0;
}
.key-btn{
	background-color: #fff;
	width: 100%;
	height: 110rpx;
}

.confirm{
	width: 100%;
	flex:1;
	padding: 10rpx 0 10rpx 0;
	box-sizing: border-box;
	button{
		width: 100%;
		height: 100%;
		.confirm-text{
			color:#fff;
			display: block;
			font-size: 32rpx;
		}
	}
}
.bg-gradual-red {
	background-image: var(--gradualRed);
	color: var(--white);
}

.bg-gradual-green {
	background-image: var(--gradualGreen);
	color: var(--white);
}
.bg-gradual-orange {
	background-image: var(--gradualOrange);
	color: var(--white);
}

.c-red{color: #FF0000;}
.c-green{color: #36b828}
.c-orange{color: #ec8d20}

.c-price{color: #F21D2F;}
.c-yellow{color: #f8e321;}
.c-common{color:#A60000;}

.c-fff{color: #fff!important;}
.c-333{color: #333!important;}
.c-666{color: #666!important;}
.c-999{color: #999!important;}
.c-ddd{color: #ddd!important;}
.c-bbd{color:#bbdcf4!important;}
.c-aaa{color: #aaa!important;}
.c-bbb{color: #bbb!important;}
.c-ccc{color: #ccc!important;}
.c-000{color: #000!important;}

.bg-fff{background: #fff!important;}


.bg-common{background: #A60000!important;}
.bg-green{background: #36b828!important;}
.bg-orange{background: #ec8d20!important;}

.bg-trans{background:transparent!important;}
.bg-f8f{background:#f8f8f8!important;}
.bg-f5f{background:#f5f5f5!important;}
.bg-gray{background: #bbb!important;}

.opacity7{opacity: 0.7;}
.scale7{transform:scale(0.7)}
.scale8{transform:scale(0.8)}
/*===============================================
  A. font
================================================= */
.fs6{font-size:16rpx!important;}
.fs8{font-size:18rpx!important;}
.fs10{font-size:20rpx!important;}
.fs11{font-size:22rpx!important;}
.fs12{font-size:24rpx!important;}
.fs13{font-size:26rpx!important;}
.fs14{font-size:28rpx!important;}
.fs15{font-size:30rpx!important;}
.fs16{font-size:32rpx!important;}
.fs17{font-size:34rpx!important;}
.fs18{font-size:36rpx!important;}
.fs20{font-size:40rpx!important;}
.fs22{font-size:44rpx!important;}
.fs24{font-size:48rpx!important;}
.fs25{font-size:50rpx!important;}
.fs26{font-size:52rpx!important;}
.fs28{font-size:56rpx!important;}
.fs30{font-size:60rpx!important;}
.fs40{font-size:80rpx!important;}
.fs50{font-size:100rpx!important;}

.fwb{font-weight:bold;}
.fw600{font-weight:600;}

.wdauto{width: auto;}
.wd10{width:10%!important;}
.wd15{width:15%!important;}
.wd20{width:20%!important;}
.wd25{width:25%!important;}
.wd30{width:30%!important;}
.wd33{width:33.333%!important;}
.wd66{width:66.666%!important;}
.wd40{width:40%!important;}
.wd45{width:45%!important;}
.wd50{width:50%!important;}
.wd60{width:60%!important;}
.wd70{width:70%!important;}
.wd75{width:75%!important;}
.wd80{width: 80%!important;}
.wd85{width: 85%!important;}
.wd90{width: 90%!important;}
.wd95{width: 95%!important;}
.wd100{width:100%!important;}

/*===============================================
  margin、padding
================================================= */
.mauto{margin: auto!important;}
.p-common{padding:20rpx 30rpx;}

.mtn{margin-top:0!important;}
.mbn{margin-bottom:0!important;}
.mln{margin-left:0!important;}
.mrn{margin-right:0!important;}
.ptn{padding-top:0!important;}
.pbn{padding-bottom:0!important;}
.pln{padding-left:0!important;}
.prn{padding-right:0!important;}

.m10{margin:20rpx!important;}
.m15{margin:30rpx!important;}
.m20{margin:40rpx!important;}
.m16{margin:32rpx!important;}
.p5{padding: 10rpx!important;}
.p10{padding: 20rpx!important;}
.p15{padding: 30rpx!important;}

.px5{padding-left: 10rpx;padding-right: 10rpx;}
.px10{padding-left: 20rpx;padding-right: 20rpx;}
.px15{padding-left: 30rpx;padding-right: 30rpx;}
.py5{padding-top: 10rpx;padding-bottom: 10rpx;}
.py10{padding-top: 20rpx;padding-bottom: 20rpx;}
.py15{padding-top: 30rpx;padding-bottom: 30rpx;}

.mt2{margin-top:4rpx!important;}
.mt5{margin-top:10rpx!important;}
.mt8{margin-top:16rpx!important;}
.mt10{margin-top:20rpx!important;}
.mt12{margin-top:24rpx!important;}
.mt15{margin-top:30rpx!important;}
.mt20{margin-top:40rpx!important;}
.mt30{margin-top:60rpx!important;}
.mt40{margin-top:80rpx!important;}
.mt50{margin-top:100rpx!important;}
.mb3{margin-bottom:6rpx!important;}
.mb5{margin-bottom:10rpx!important;}
.mb10{margin-bottom:20rpx!important;}
.mb15{margin-bottom:30rpx!important;}
.mb20{margin-bottom:40rpx!important;}
.mb50{margin-bottom:100rpx!important;}

.mr3{margin-right:6rpx!important;}
.mr5{margin-right:10rpx!important;}
.mr10{margin-right:20rpx!important;}
.mr15{margin-right:30rpx!important;}
.mr20{margin-right:40rpx!important;}
.mr30{margin-right:60rpx!important;}

.ml3{margin-left:6rpx!important;}
.ml5{margin-left:10rpx!important;}
.ml10{margin-left:20rpx!important;}
.ml15{margin-left:30rpx!important;}
.ml20{margin-left:40rpx!important;}
.ml30{margin-left:60rpx!important;}

.pt3{padding-top: 6rpx!important;}
.pt5{padding-top: 10rpx!important;}
.pt10{padding-top: 20rpx!important;}
.pt11{padding-top: 22rpx!important;}
.pt15{padding-top: 30rpx!important;}
.pt20{padding-top: 40rpx!important;}
.pl5{padding-left: 10rpx!important;}
.pl10{padding-left: 20rpx!important;}
.pr5{padding-right: 10rpx!important;}
.pr10{padding-right: 20rpx!important;}
.pl15{padding-left: 30rpx!important;}
.pl20{padding-left: 40rpx!important;}
.pl30{padding-left: 60rpx!important;}
.pr15{padding-right: 30rpx!important;}
.pr20{padding-right: 40rpx!important;}
.pr25{padding-right: 50rpx!important;}
.pr30{padding-right: 60rpx!important;}
.pr40{padding-right: 80rpx!important;}
.pb8{padding-bottom: 16rpx!important;}
.pb3{padding-bottom: 6rpx!important;}
.pb10{padding-bottom: 20rpx!important;}
.pb11{padding-bottom: 22rpx!important;}
.pb15{padding-bottom: 30rpx!important;}
.pb20{padding-bottom: 40rpx!important;}
.pb50{padding-bottom: 100rpx!important;}
.pb60{padding-bottom: 120rpx!important;}
.pb70{padding-bottom: 140rpx!important;}
.pb80{padding-bottom: 160rpx!important;}
.pb90{padding-bottom: 180rpx!important;}

/*===============================================
  line-height
================================================= */
.lh17{line-height:34rpx!important}
.lh20{line-height:40rpx!important}
.lh22{line-height:44rpx!important}
.lh24{line-height:48rpx!important}
.lh26{line-height:52rpx!important}
.lh28{line-height:56rpx!important}
.lh30{line-height:60rpx!important}
.lh32{line-height:64rpx!important}
.lh35{line-height:70rpx!important}
.lh36{line-height:72rpx!important}
.lh40{line-height:80rpx!important}
.lh44{line-height:88rpx!important}
.lh48{line-height:96rpx!important}
.lh50{line-height:100rpx!important;}
.lh55{line-height:110rpx!important;}
/*===============================================
  height
================================================= */
.h20{height:40rpx!important;}

.br5{border-radius: 10rpx!important;}
.br10{border-radius: 20rpx!important;}

.bd-e8{border: 1rpx solid #e8e8e8;}
.bd-dd{border: 1px solid #dddddd;}
.bb{border-bottom: 1rpx solid #ddd;}
.bd-com{border: 1rpx solid #A60000;}
.bd-red{border: 1px solid #A60000;}
.bd-green{border: 1px solid #36b828;}
.bd-orange{border: 1px solid #ec8d20;}

.bt{border-top: 1rpx solid #eee;}
.br{border-right: 2rpx solid #eee;}
.bdn{border:none!important}
/*===============================================
 more-style
================================================= */
.over{overflow: hidden;}
.left{text-align:left!important;}
.right{text-align:right!important;}
.bottom{text-align:bottom!important;}
.center{text-align:center!important;}
.fl{float:left!important;}
.fr{float:right!important;}
.clear-both{clear:both}
.clear-none{clear:none}
.clearfix{zoom:1}
.clearfix:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0;content:".";font-size:0}
.pos-rel{position: relative!important;}
.pos-abs{position: absolute!important;}

.vb{vertical-align: bottom;}
.vm{vertical-align: middle;}
.dis-line{display:inline-block!important;}
.dis-block{display:block!important;}
.dis-none{display:none!important;}

.dis-flex{display:flex!important;}
.dis-flex-column{display:flex!important;flex-direction: column;}
.flex-center{align-items:center;justify-content:center;}
.flex-align-center{align-items:center;}
.flex-between{justify-content:space-between;}
.flex-end{justify-content:flex-end;}
.flex{flex:1}
.flex-wrap{flex-wrap:wrap;}

.breakall{word-break:break-all}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ellipsis-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word}
.ellipsis-4{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word}

.after-none,.after-line,.after-line-15,.before-line{position: relative;}
.after-none::after{height:0!important;}
/*竖线*/
.shu-line{border-right: solid 2rpx  #ccc;}
/*下线*/
.after-line::after{position: absolute;right: 0;bottom: 0;left:0;height: 1px;content: '';transform: scaleY(.3);background-color: #c8c7cc;}
.after-line-15::after{position: absolute;right: 0;bottom: 0;left: 30rpx;height: 1px;content: '';transform: scaleY(.3);background-color: #c8c7cc;}
/*上线*/
.before-line::before{position: absolute;top: 0; right:0;left:0;height: 1px;content: '';transform: scaleY(.3);background-color: #c8c7cc;}
.after-last-none:last-child::after{height:0!important;}

/*中划线*/
.text-decoration{text-decoration:line-through;}
/* 箭头 */
.navigator-right,.navigator-down{position: relative;}
.navigator-right:after{content:" ";display:inline-block;height:14rpx;width:14rpx;border-width:2rpx 2rpx 0 0;border-style:solid;transform:matrix(.71,.71,-.71,.71,0,0);position:absolute;top:50%;margin-top:-7rpx;right:28rpx;border-color:#888;}
.navigator-down:after{content:" ";display:inline-block;height:14rpx;width:14rpx;border-width:0 2rpx 2rpx  0;border-color:#888;border-style:solid;transform:matrix(.71,.71,-.71,.71,0,0);position:absolute;top:50%;margin-top:-7rpx;right:28rpx}

.common-section{background-color: #ffffff;padding:20rpx 30rpx;font-weight: 700;font-size: 30rpx;border-bottom: 1rpx solid #eee;}
.common-cell{background-color: #ffffff;padding:20rpx 30rpx;font-size: 30rpx;border-bottom: 1rpx solid #eee;}

/* 提交按钮 */
.btn-submit-box{position: fixed;left: 0;right: 0;bottom: 0;background-color: #ffffff;padding-top: 10rpx;padding-bottom: 10rpx;}
.btn-submit {width: 90%;margin: auto;height:80rpx;font-size:32rpx;border-radius:50px;}
.btn-mini{border-radius: 40rpx;line-height: 64rpx;font-size: 28rpx;min-width: 100rpx;}






</style>
